<template>
  <div class="footer">
  	<footer class="fixBottomBox">
        <ul>
           
            <router-link tag="li" to="/home" class="tabItem">
            	<i class="fa fa-home" :class="home" aria-hidden="true" style="font-size: 24px;"  @click="gohome"></i>
                <div style=" margin-top: -35%;font-size: 12px;font-weight: bold;" :class="home"  @click="gohome">主页</div>
            </router-link>
             <router-link tag="li" to="/catgory" class="tabItem">
                <i class="fa fa-credit-card-alt" aria-hidden="true" :class="pay" style="font-size: 24px;" @click="gopay"></i>
                <div style=" margin-top: -35%;font-size: 12px;font-weight: bold;" :class="pay" @click="gopay">充值</div>
            </router-link> 
            <!-- <router-link tag="li" to="/find" class="tabItem">
                <a href="javascript:;" class="tab-item-link">
                    <img src="../assets/images/n-find.png" alt="" class="tab-item-icon">
                </a>
            </router-link> -->
            <router-link tag="li" to="/cart" class="tabItem">
                <i class="fa fa-shopping-cart" :class="cart" aria-hidden="true" style="font-size: 24px;"  @click="gocart"></i>
                <div style=" margin-top: -35%;font-size: 12px;font-weight: bold;" :class="cart"  @click="gocart">购物车</div>
            </router-link>
            <router-link tag="li" to="/mine" class="tabItem">
                <i class="fa fa-street-view" :class="peo" aria-hidden="true" style="font-size: 24px;"  @click="gopeo"></i>
                <div style=" margin-top: -35%;font-size: 12px;font-weight: bold;" :class="peo"  @click="gopeo">机构中心</div>
            </router-link>
        </ul>
    </footer>
  </div>
</template>
<script>
export default {
    data(){
        return {
            home:'home',
            pay:'pay',
            cart:'cart',
            peo:'peo'
        }
    },
    methods:{
        gohome(){
            this.home = 'homes'
            this.pay = 'pay'
            this.cart = 'cart'
            this.peo = 'peo'
        },
        gopay(){
            this.pay = 'pays'
            this.home = 'home'
            this.cart = 'cart'
            this.peo = 'peo'
        },
        gocart(){
            // this.cart = 'carts'
            this.pay = 'pay'
            this.home = 'home'
            this.peo = 'peo'
        },
        gopeo(){
            this.peo = 'peos'
            this.pay = 'pay'
            this.home = 'home'
            this.cart = 'cart'
        }
    }
}
</script>

<style>
@import '../assets/css/font-awesome.min.css';
.fixBottomBox .tabItem{
    margin-top: 1%;
}
.home,.pay,.cart,.peo{
    color: rgb(154,154,154);
}
.homes,.pays,.carts,.peos{
    color:red
}
</style>
